<!--
 * Copyright (c) 2023FengTaiSEC Corporation.
 * @Description:
 * @Author: 刘宇薇<liuyuwei@fengtaisec.com>
 * @Date: 2023-05-24 19:48:33
 * @LastEditTime: 2025-05-13 09:27:59
 * @LastEditors: 自己的姓名<XXXXX@fengtaisec.com>
 * @FilePath: \nw-web\src\components\search\searchList.vue
 * @AmendmentRecord:
-->
<template>
  <div class="search-list-container flex items-center">
    <span
      class="whitespace-nowrap"
      v-text="`${props.searchTypeName ? `${props.searchTypeName}:` : ''}`"
    />
    <div class="searchList flex flex-nowrap overflow-y-hidden overflow-x-auto">
      <!-- <el-link
        :class="['sticky left-0', activeName === 'all' ? 'activeLink' : '']"
        :underline="false"
        @click="handleClick({ type: props.searchType, name: 'all' })"
        >全部
      </el-link> -->
      <div
        class="textButton flex flex-nowrap overflow-y-hidden overflow-x-auto snap-center"
      >
        <el-button
          :type="activeName === 'all' ? 'primary' : ''"
          @click="handleClick({ type: props.searchType, name: 'all' })"
          :style="{ width: needsAdaptiveWidth('全部') ? 'auto' : '96px' }"
        >
          全部
        </el-button>
        <el-button
          v-for="item in props.searchList"
          :key="item.name"
          :type="activeName === item.name ? 'primary' : ''"
          :underline="false"
          @click.stop="handleClick(item)"
          :style="{
            width: needsAdaptiveWidth(formatValue(item)) ? 'auto' : '96px',
          }"
        >
          {{ formatValue(item) }}
        </el-button>
      </div>
    </div>
  </div>
</template>
<script setup lang="ts">
import { defineEmits, ref } from 'vue';

type ListType = {
  name: string;
  value: number;
  num?: number;
};
type searchProps = {
  searchType: string;
  searchTypeName: string;
  searchList: [ListType];
};
type emitType = {
  (e: 'clickItem', value: any): void;
};

const props = defineProps({
  searchType: String,
  searchTypeName: String,
  searchList: Array<ListType>,
});
const emit = defineEmits<emitType>();
const activeName = ref<string>('all');
// 处理监听事件
const handleClick = (item: any) => {
  activeName.value = item.name;
  emit('clickItem', item);
};

// 格式化统计数
const formatValue = (item: any): string => {
  let count = item.num ? item.num : 0;
  if (count === 0) {
    count = item.count ? item.count : 0;
  }
  const value = Number(count);
  const text = value === 0 ? `${item.name}` : `${item.name}(${value})`;

  // 返回文本，同时在template中动态计算样式
  return text;
};

/**
 * 判断按钮是否需要自适应宽度 (超过6个字符)
 * 可以在模板中通过 :class 和 :style 使用
 */
const needsAdaptiveWidth = (text: string): boolean => {
  return text.length > 6;
};
</script>
<style lang="scss">
.search-list-container {
  margin: 8px 0;
  overflow: visible; /* 确保容器不会裁剪子元素 */

  .searchList {
    margin-left: 25px;
    overflow: visible; /* 确保搜索列表不会裁剪子元素 */

    .el-link {
      white-space: nowrap;
      padding: 5px 10px;

      &.activeLink {
        color: #0d84ff;
      }
    }

    .textButton {
      /* 为按钮容器添加一些内边距和溢出控制 */
      overflow: visible;

      &::-webkit-scrollbar {
        display: none;
        scrollbar-width: none;
        -ms-overflow-style: none;
      }

      button {
        /* 基础宽度，对于6个字符以下的按钮 */
        min-width: 96px;
        height: 36px;
        background: #093875;
        border: 1px solid #0073f3;
        border-radius: 4px;
        color: #acc2db;
        transition: all 0.3s ease;
        /* 添加内边距，确保长文本有足够空间 */
        padding: 0 12px;
        /* 添加自动计算宽度策略 */
        width: auto;
        white-space: nowrap;
        /* 增加按钮间的间距，防止悬浮时重叠 */
        position: relative;
        z-index: 1;

        &:hover {
          transform: translateY(-2px);
          box-shadow: 0 4px 8px rgba(0, 71, 150, 0.2);
          background: #0b4893;
          z-index: 2; /* 提高悬浮按钮的层级 */
        }
      }

      .el-button--primary {
        background: #0073f3;
        color: #fff;

        &:hover {
          background: #0083ff;
          transform: translateY(-2px);
          box-shadow: 0 4px 12px rgba(0, 115, 243, 0.3);
        }
      }
    }
  }
}
</style>
